<template>
	<view>
		<wuc-tab
			:tab-list="tabList"
			textFlex
			:tabCur.sync="TabCur"
			@change="tabChange"
			tab-class="text-center text-black bg-white"
			select-class="text-blue"
			style="font-size: 30upx;position: fixed;width: 100vw;"
		></wuc-tab>
		<view class="scroll_cont">
			<s-pull-scroll ref="pullScroll" :fixed="true" top="100" :pullDown="pullDown" :pullUp="loadData" finishText="我也是有底线的">
				<view v-for="(itemTwo, indexTwo) in goodsList" :key="indexTwo" class="list" @tap="openPayInvest(itemTwo.uuniId)">
					<view class="list_cont">
						<view class="clearfix list_title">
							<view class="fl">{{ itemTwo.uuniDate }}</view>
							<view class="fr" v-if="itemTwo.uuniPay == 0">未支付</view>
							<view class="fr" v-else-if="itemTwo.uuniSuccess ==1">已成交</view>
							<view class="fr" v-else>已支付</view>
						
						</view>
						<view class="clearfix list_cont_wrap">
							<view class="list_cont_wrap_l"><image :src="itemTwo.saleUser.headpic" mode="" style="width: 100%;height: 138upx;"></image></view>
							<view class="list_cont_wrap_r">
								<view class="clearfix">
									<text>{{ itemTwo.saleUser.user_name }}</text>
									<text class="list_gclass">{{ itemTwo.uuniPayDate || '未支付' }}</text>
									<text class="list_gprice">{{ itemTwo.uuniJiner }}</text>
								</view>
								<view class="list_detail">付款遇到问题，请联系系统管理员</view>
								<view class="clearfix list_last">
									<text class="list_skill">{{ itemTwo.saleUser.mobile }}</text>
									<text class="list_collect"></text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="no" v-if="!(goodsList.length>0)">
					<view class="none">
						<img src="@/imgs/none.png"></img>
						<view>暂无数据</view>
					</view>
				</view> -->
				<!-- <view class="no" v-if="!isloading && page_index>=total_page">
					<view class="none">
						<view>我也是有底线的</view>
					</view>
				</view> -->
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import sPullScroll from '@/components/s-pull-scroll/index.vue';
import bussiness from '../../static/dataJson/bussiness.json';

export default {
	data() {
		return {
			TabCur: 0,
			swiperHeight: 0, //外部的高度
			tabList:bussiness.tabList,
			goodsList: [],
			id: ''
		};
	},
	components: {
		WucTab,
		sPullScroll
	},
	onLoad(e) {
		if (e.id) this.id = e.id;
	},
	mounted() {
		this.refresh();

		var _self = this;
		uni.$on('pay', function(e) {
			//监听刷新列表
			_self.refresh();
		});
	},
	methods: {
		tabChange: function(index) {
			this.refresh();
		},
		refresh: function() {
			this.$nextTick(() => {
				this.$refs.pullScroll.refresh();
			});
		},
		pullDown: function(pullScroll) {
			this.getListData(this.TabCur, pullScroll);
		},
		loadData: function(pullScroll) {
			this.getListData(this.TabCur, pullScroll);
		},
		getListData: function(tab, pullScroll) {
			//mode 1代表下一页 0代表刷新
			//console.log(pullScroll.page);

			if (pullScroll.page == 1) {
				this.goodsList = [];
			}

			if (tab == 0) {
				this.$api.http
					.get('assistance/tradinghall/pay_invest_lists', {
						page: pullScroll.page,
						id: this.id
					})
					.then(res => {
						
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			} else if (tab == 1) {
				this.$api.http
					.get('assistance/tradinghall/pay_invest_lists', {
						page: pullScroll.page,
						ispay: 0,
						id: this.id
					})
					.then(res => {
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			} else {
				this.$api.http
					.get('assistance/tradinghall/pay_invest_lists', {
						page: pullScroll.page,
						ispay: 1,
						id: this.id
					})
					.then(res => {
						this.callbackapi(res.data, pullScroll);
						pullScroll.success();
					});
			}
		},
		callbackapi: function(data, pullScroll) {
			for (var i = 0; i < data.length; i++) {
				this.goodsList.push(data[i]);
			}

			if (data.length == 0) {
				if (pullScroll.page == 1) {
					pullScroll.empty();
				} else {
					pullScroll.finish(true);
				}
			}
		},
		openPayInvest(id) {
			//console.log('id', id);
			uni.navigateTo({
				url: 'payinvest?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.clearfix {
	zoom: 1;
	display: block;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

.text-blue {
	color: #5390e3;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

swiper {
	height: 100vh;
}

.scroll_cont {
	background-color: #f5f5f5;
	height: 100vh;

	.none {
		padding: 150upx 0;
		text-align: center;
		color: #adadad;
		line-height: 50upx;

		img {
			width: 60upx;
			height: 60upx;
		}
	}

	.list {
		background-color: #ffffff;

		.list_cont {
			padding: 20upx;
			margin-top: 10upx;

			.list_title {
				font-size: 28upx;
				color: #848484;
			}

			.list_cont_wrap {
				font-size: 32upx;
				border-top: 2upx solid #eeeeee;
				margin-top: 16upx;
				padding: 24upx 0;

				.list_cont_wrap_l {
					width: 20%;
					float: left;
				}

				.list_cont_wrap_r {
					float: right;
					width: 78%;
					margin-left: 2%;

					.list_gclass {
						font-size: 24upx;
						color: #848484;
						margin-left: 16upx;
						border-left: 2upx solid #eeeeee;
						padding-left: 16upx;
					}

					.list_gprice {
						color: #ef5d65;
						text-align: right;
						float: right;
						font-weight: bold;
					}

					.list_detail {
						font-size: 24upx;
						color: #848484;
						margin-top: 12upx;
					}

					.list_last {
						margin-top: 12upx;

						.list_skill {
							color: #4d4d4d;
							font-size: 24upx;
							background: #e8e8e8;
							padding: 6upx 12upx;
							border-radius: 5upx;
						}

						.list_collect {
							color: #848484;
							font-size: 24upx;
							float: right;
						}
					}
				}
			}
		}
	}
}
</style>
